<template>
  <div id="app" ref="app">
    <router-view></router-view>
    <!-- <Swiper ref="refSwiper" :swiperOption="swiperOption">
      <div class="swiper-slide">
        <Home></Home>
      </div>
      <div class="swiper-slide">
        <More></More>
      </div>
      <div class="swiper-slide">
        <Queue></Queue>
      </div>
      <div class="swiper-slide">
        <Biobank></Biobank>
      </div>
      <div class="swiper-slide">
        <Clinical></Clinical>
      </div>
    </Swiper> -->
  </div>
</template>

<script>
// import Swiper from '@/components/swiper/index.vue';
// import Home from '@/views/home/index.vue';
// import More from '@/views/more/index.vue';
// import Queue from '@/views/queue/index.vue';
// import Biobank from '@/views/biobank/index.vue';
// import Clinical from '@/views/clinical/index.vue';
export default {
  name: 'App',
  data() {
    return {
      swiperOption: {
        loop: false,
        autoplay: false,
      },
    };
  },
  // components: { Swiper, Home, More, Queue, Biobank, Clinical },
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
p {
  margin: 0;
}
.w-full {
  width: 100%;
}
.text-center {
  text-align: center;
}
#app {
  width: 100vw;
  height: 100vh;
  background-color: rgb(1, 9, 56);

  .color-text {
    color: rgba(59, 199, 255, 1);
    background-image: -webkit-linear-gradient(
      bottom,
      rgb(57, 179, 255),
      rgb(132, 207, 255),
      rgb(255, 255, 255)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .box-border {
    border: 1px solid #002dae;
    box-shadow: inset 0px 0px 4px 2px #002dae;
    background: rgba(2, 21, 73, 1);
  }
  .font-bold {
    font-weight: bolder;
  }
}
</style>
